<template>
  <div class="wrap">
    <div class="left">
      <div class="img-box">
        <img src="../assets/image/jx-bg-small.png" alt width="100%" height="100%">
      </div>
    </div>
    <div class="right">
      <div class="form-box">
        <div class="con">
          <div class="hello">Hello,欢迎登录</div>
          <div class="wel">WELCOME TO THE SYSTEM</div>
          <div class="title">
            {{ $baseInfo.BASE_TITLE }}
            <span class="undline" />
          </div>
          <div class="form-area">
            <el-form ref="ruleForm" :model="ruleForm" :rules="rules" label-width="0">
              <el-form-item label prop="userName">
                <el-input
                  v-model="ruleForm.userName"
                  placeholder="请输入账号"
                  prefix-icon="el-icon-user"
                />
              </el-form-item>
              <el-form-item label prop="password">
                <el-input
                  v-model="ruleForm.password"
                  placeholder="请输入密码"
                  prefix-icon="el-icon-lock"
                  type="password"
                  show-password
                />
              </el-form-item>
              <!-- <el-form-item label>
                <el-checkbox v-model="ruleForm.remeber">记住账户和密码？</el-checkbox>
              </el-form-item> -->
            </el-form>
          </div>
          <div class="btn-box">
            <el-button
              v-waves
              class="btn"
              type="primary"
              :loading="loginLoading"
              round
              @click="handleLogin"
            >登录</el-button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
// import {
//   getbydataCalculateCycle
// } from '@/api/reportCenter'
import { setNewToken } from '@/utils/publicFun'
import { login } from '@/api/login'
import Cookies from 'js-cookie'
import CryptoJS from 'crypto-js'

export default {
  name: '',
  components: {},
  data() {
    return {
      loginLoading: false,
      ruleForm: {
        userName: '',
        password: '',
        remeber: false
      },
      rules: {
        userName: [{ required: true, message: '请输入账号', trigger: 'blur' }],
        password: [{ required: true, message: '请输入密码', trigger: 'blur' }]
      },
      currentWardId: ''
    }
  },
  created() {
    this.checkHavePwd()
  },
  mounted() {},
  methods: {
    handleLogin() {
      this.$refs.ruleForm.validate(async valid => {
        if (valid) {
          // const res = await this._personnelQry()
          // if (res) {
          //   if (this.ruleForm.remeber) {
          //     Cookies.set('userName', this.ruleForm.userName, { expires: 365 }) // 失效时间3600天
          //     Cookies.set(
          //       'password',
          //       CryptoJS.AES.encrypt(this.ruleForm.password, 'abc!'),
          //       { expires: 365 }
          //     )
          //   } else {
          //     Cookies.remove('userName')
          //     Cookies.remove('password')
          //   }
          //   this.dialogVisible = true
          // }
          const param = {
            code: this.ruleForm.userName,
            passWord: this.ruleForm.password
          }
          this.loginLoading = true
          login(param).then(res => {
            this.loginLoading = false
            if (res.code === 200) {
              setNewToken(res.data.token)
              const userInfo = res.data
              const menuList = res.data.menuVOList
              localStorage.userInfo = JSON.stringify(userInfo || {})
              localStorage.menuList = JSON.stringify(menuList || {})
              this.$router.push('/')
              this.$message.success(res.msg)
              // getUserInfo().then(res => {
              //   if (res.code === 200) {
              //     const { userInfo } = res.data
              //     localStorage.userInfo = JSON.stringify(userInfo || {})
              //     this.$router.push('/')
              //     this.getDetails()
              //     this.$message.success(res.message)
              //   } else {
              //     this.$message.error(res.message)
              //   }
              // })
            } else {
              this.$message.error(res.msg)
            }
          })
        }
      })
    },
    async _personnelQry() {
      const params = {
        UserName: this.ruleForm.userName,
        Pwd: this.ruleForm.password
      }
      console.log(params)
    },
    checkHavePwd() {
      const userName = Cookies.get('userName') ? Cookies.get('userName') : ''
      const enPassword = Cookies.get('password') ? Cookies.get('password') : ''
      if (enPassword) {
        this.ruleForm.userName = userName
        // 密码解密
        this.ruleForm.password = CryptoJS.AES.decrypt(
          enPassword,
          'abc!'
        ).toString(CryptoJS.enc.Utf8)
        // 将是否记住密码置为true
        this.ruleForm.remeber = true
      } else {
        this.ruleForm.password = ''
      }
    },
    getDetails(type) {
      // getbydataCalculateCycle().then((res) => {
      //   if (res.code === 200) {
      //     if (res.data) {
      //       this.setLocalValue(res.data)
      //     } else {
      //       this.setLocalValue({
      //         ccType: 1,
      //         startDay: '01',
      //         endDay: '31',
      //         endMoon: '0',
      //         startMoon: '0'
      //       })
      //     }
      //   }
      // }).catch((err) => {
      //   console.log('err', err)
      // })
    },
    setLocalValue(list = {}) {
      localStorage.setItem('checkCycle', JSON.stringify(list))
    },
    confirm() {
      this.$router.push({
        path: '/index'
      })
    },
    cancel() {
      this.dialogVisible = false
    },
    setCurrentWard(item) {
      this.currentWardId = item.id
    }
  }
}
</script>

<style lang="less" scoped>
.wrap {
  height: 100vh;
  width: 100vw;
  display: flex;
  align-items: center;
  background-image: url('../assets/image/jx-bg-bg.png');
  background-repeat: no-repeat;
  background-position: 100% 100%;
  background-size: 100% 100%;
  padding: 0px 10%;
  box-sizing: border-box;
  overflow: hidden;
}
.left {
  height: 74%;
  width: 60%;
  display: flex;
  justify-content: center;
  align-items: center;
  min-width: 460px;
  .img-box {
    height: 100%;
    width: 100%;
  }
}
.right {
  height: 72%;
  width: 40%;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #ffffff;
  border-radius: 0px 16px 16px 0px;
  min-width: 520px;
  .form-box {
    padding: 10px 0px;
    width: 100%;
    height: 60%;
    padding: 18% 10%;
    display: flex;
    align-items: center;
    justify-content: center;
    .con {
      height: 400px;
      width: 70%;
    }
    .hello {
      font-size: 42px;
      font-weight: 700;
      text-align: center;
      color: #3cadfd;
    }
    .wel {
      font-size: 16px;
      font-weight: normal;
      color: #b4b4b4;
      text-align: center;
      margin: 10px 0px 17px 0px;
    }
    .title {
      text-align: center;
      font-size: 30px;
      margin-bottom: 8%;
      font-weight: 700;
      color: #555555;
      position: relative;
      .undline {
        position: absolute;
        left: 0px;
        bottom: 1px;
        right: 0px;
        margin: auto;
        width: 120px;
        height: 6px;
        opacity: 0.35;
        background: #3a72ff;
        border-radius: 4px;
      }
    }
  }
}
.btn {
  width: 100%;
  background: linear-gradient(0deg, #2f70f0 0%, #0395f5 100%);
  border-color: transparent;
  font-size: 18px;
}
.ward-wrap {
  height: 400px;
  width: 600px;
  overflow-y: auto;
  display: flex;
  flex-wrap: wrap;
  .ward {
    height: 48px;
    width: calc((100% - 48px) / 3);
    border: 1px solid #ededed;
    margin-right: 24px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 100px;
    cursor: pointer;
  }
  .ward:nth-of-type(3n) {
    margin-right: 0;
  }
  .ward:hover {
    background: linear-gradient(78deg, #5bc3ff 0%, #6194fe 100%);
    color: #fff;
  }
  .is-active {
    background: linear-gradient(78deg, #5bc3ff 0%, #6194fe 100%);
    color: #fff;
  }
}
:deep(.el-input__inner) {
  border-radius: 100px;
  background: #fafafa;
}
</style>
